<template>
    <view class="upload-pages">
        <van-toast id="van-toast" />
        <view class="col">
            <view class="exhibit" v-for="(item, index) in uploadList" :key='index'>
                <image class="imgs" :src="item"></image>
                <view class="del" :data-index="index" @click="getdel">
                    <!-- <image class="imgs" src="https://sucai.suoluomei.cn/sucai_zs/images/20191227164946-1.png"></image> -->
                </view>
            </view>
            <view class="album" v-if="upload == 1" @click='getupload'>
                <view class='upload'>
                    <!-- <image class="imgs" src='https://sucai.suoluomei.cn/sucai_zs/images/20191227112640-1.png'></image> -->
                </view>
                <view class="increase" v-if="camera == 0">添加图片</view>
                <view class="increase" v-if="camera == 1">{{ amount }}/3</view>
            </view>
        </view>
        <view class="submit">
            <van-button @click="getsubmit" type='primary'>提交</van-button>
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            uploadList: [],
            upload: 1,
            camera: 0,
            amount: ''
        }
    },
    methods: {
        // 上传图片
        getupload() {
            var that = this
            // 限制上传的数量为3
            uni.chooseImage({
                count: 3 - that.uploadList.length,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success(res) {
                    that.getpublish(res.tempFilePaths, 0)
                }
            })
        },
        // 递归循环下载图片
        getpublish(list, i) {
            uni.showLoading({ title: '正在上传第' + (this.uploadList.length + 1) + '张' })
            var that = this
            uni.uploadFile({
                url: "http://xxx/File/insert", // 要上传的接口地址
                filePath: list[i],
                name: 'file',
                formData: {
                    token: '1234567890'   // 上传的参数，和后端开发约定
                },
                success(res) {
                    var info = JSON.parse(res.data)

                    that.uploadList.push(info.data.url)
                    that.uploadList = that.uploadList
                    if (i + 1 == list.length) {
                        uni.showToast({ title: '上传成功' })
                    }
                    uni.hideLoading()
                    if (++i < list.length) {
                        that.getpublish(list, i);
                    }
                    var length = that.uploadList.length
                    // 大于1显示数量
                    if (length >= 1) {
                        that.camera = 1
                        that.amount = length
                    }
                    // 隐藏上传图片
                    if (length == 3) {
                        that.upload = 0
                    }
                },
            })
        },
        // 照片删除
        getdel(e) {
            var list = this.uploadList
            var index = e.currentTarget.dataset.index
            list.splice(index, 1);
            this.uploadList = list
            this.amount = list.length
            console.log(this.uploadList)
            // 判断长度小于3并且长度不等于0 
            if (this.amount < 3 && this.amount != 0) {
                this.upload = 1
                this.camera = 1
            }
            if (this.amount == 0) {
                this.camera = 0
            }
        },
        getsubmit() {
            console.log('提交的图片是');
            console.log(this.uploadList)
        }
    }
}
</script>

<style lang="less" scoped>
.upload-pages {
    margin: 20rpx;

    .col {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .exhibit {
            position: relative;
            width: 140rpx;
            height: 140rpx;
            margin: 15rpx;

            .del {
                position: absolute;
                top: -10rpx;
                right: -10rpx;
                width: 30rpx;
                height: 30rpx;
            }
        }

        .album {
            width: 140rpx;
            height: 140rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border: 2rpx dashed #eee;

            .upload {
                width: 50rpx;
                height: 50rpx;
            }


            .increase {
                margin-top: 10rpx;
                font-size: 20rpx;
                color: #666;
            }
        }
    }

    .submit {
        margin-top: 20px;
    }

    .imgs {
        width: 100%;
        height: 100%;
    }
}
</style>